<template>
  <div class="index-container">
    <div :style="'height:' + split_height + 'px'">
      <Split v-model="split" mode="vertical" on-moving="split_change">
        <div slot="top" class="demo-split-pane">
          <el-row>
            <template>
              <vxe-grid v-bind="gridOptions" :data="objects" :edit-config="{ trigger: 'dblclick', mode: 'row' }"
                :highlight-current-row="true" size="mini" :height="parent_height" style="width: 100%"
                @edit-closed="editEvent" @current-change="getFieldsAndButtons">
                <template #toolbar_buttons>
                  <el-button type="primary" style="margin-left:10px" size="mini" @click="addInit">新建模型</el-button>
                  <el-input v-model="searchWords" style="width:200px;margin-left: 10px;" size="small"
                    placeholder="输入关键字查询" clearable @input="search()" />
                </template>
                <template #is_query_default="{ row }">
                  <el-switch v-model="row.is_query" active-color="#13ce66" inactive-color="#ff4949"
                    @change="changeObject(row)" />
                </template>
                <template #is_add_default="{ row }">
                  <el-switch v-model="row.is_add" active-color="#13ce66" inactive-color="#ff4949"
                    @change="changeObject(row)" />
                </template>
                <template #is_save_add_default="{ row }">
                  <el-switch v-model="row.is_save_add" active-color="#13ce66" inactive-color="#ff4949"
                    @change="changeObject(row)" />
                </template>
                <template #is_update_default="{ row }">
                  <el-switch v-model="row.is_update" active-color="#13ce66" inactive-color="#ff4949"
                    @change="changeObject(row)" />
                </template>
                <template #is_line_update_default="{ row }">
                  <el-switch v-model="row.is_line_update" active-color="#13ce66" inactive-color="#ff4949"
                    @change="changeObject(row)" />
                </template>
                <template #is_delete_default="{ row }">
                  <el-switch v-model="row.is_delete" active-color="#13ce66" inactive-color="#ff4949"
                    @change="changeObject(row)" />
                </template>
                <template #is_handle_default="{ row }">
                  <el-switch v-model="row.is_handle" active-color="#13ce66" inactive-color="#ff4949"
                    @change="changeObject(row)" />
                </template>
                <template #operation="{ row }">
                  <el-button size="mini" type="primary" @click="objectEdit_(row)">更新</el-button>
                  <el-button size="mini" type="success" @click="objectCopy_(row)">复制</el-button>
                  <el-button size="mini" type="danger" icon="el-icon-delete" @click="objectDel_(row)" />
                </template>
              </vxe-grid>
            </template>
          </el-row>
        </div>
        <div slot="bottom" class="demo-split-pane">
          <el-row style="margin-top:5px">
            <template>
              <el-tabs v-model="activeName">
                <el-tab-pane name="field">
                  <span slot="label">
                    字段管理
                    <el-badge :value="fields.length" class="item" />
                  </span>
                  <vxe-button status="primary" @click="addFieldInit">添加虚拟字段</vxe-button>
                  &nbsp;&nbsp;Tip:虚拟字段背景为黄色
                  <vxe-table ref="fieldTable" :key="Math.random()" :data="fields" :border="true" stripe
                    show-header-overflow show-overflow size="mini" :height="son_height - 100"
                    :edit-config="{ trigger: 'dblclick', mode: 'row' }" :row-style="rowStyle"
                    style="width: 100%;margin-top:10px" @edit-closed="editClosedEvent">
                    <vxe-table-column field="order_num" title="排序" width="80"
                      :edit-render="{ name: '$input', props: { type: 'number' } }" />
                    <vxe-table-column field="en" show-overflow title="字段名" />
                    <vxe-table-column field="cn" show-overflow title="中文名"
                      :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
                    <vxe-table-column field="width" show-overflow title="控件宽度"
                      :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
                    <vxe-table-column field="align" show-overflowtitle="排列"
                      :edit-render="{ name: '$select', options: alignList, optionProps: { value: 'value', label: 'label' } }" />
                    <vxe-table-column field="type" show-overflow title="控件"
                      :edit-render="{ name: '$select', options: typeList, optionProps: { value: 'value', label: 'label' } }" />
                    <vxe-table-column field="type_config" show-overflow title="控件配置"
                      :edit-render="{ name: 'EditDownTextarea' }" />
                    <vxe-table-column field="formatter" show-overflow title="格式化"
                      :edit-render="{ name: 'EditDownTextarea' }" />
                    <vxe-table-column field="validator" show-overflow title="表单验证"
                      :edit-render="{ name: 'EditDownTextarea' }" />
                    <vxe-table-column field="fictitious_sql" show-overflow width="120" title="虚拟字段来源"
                      :edit-render="{ name: 'EditDownTextarea' }" />
                    <vxe-table-column field="on_change" show-overflow title="字段更改事件"
                      :edit-render="{ name: 'EditDownTextarea' }" />
                    <vxe-table-column field="is_show" title="是否显示">
                      <template slot-scope="scope">
                        <el-switch v-model="scope.row.is_show" active-color="#13ce66" inactive-color="#ff4949"
                          @change="switchFieldChange(scope.row)" />
                      </template>
                    </vxe-table-column>
                    <vxe-table-column field="is_query" title="是否可查询">
                      <template slot-scope="scope">
                        <el-switch v-model="scope.row.is_query" active-color="#13ce66" inactive-color="#ff4949"
                          @change="switchFieldChange(scope.row)" />
                      </template>
                    </vxe-table-column>
                    <vxe-table-column field="is_add" title="是否可新增">
                      <template slot-scope="scope">
                        <el-switch v-if="!scope.row.is_fictitious" v-model="scope.row.is_add" active-color="#13ce66"
                          inactive-color="#ff4949" @change="switchFieldChange(scope.row)" />
                      </template>
                    </vxe-table-column>
                    <vxe-table-column field="is_update" title="是否可修改">
                      <template slot-scope="scope">
                        <el-switch v-if="!scope.row.is_fictitious" v-model="scope.row.is_update" active-color="#13ce66"
                          inactive-color="#ff4949" @change="switchFieldChange(scope.row)" />
                      </template>
                    </vxe-table-column>
                    <vxe-table-column field="is_line_update" title="行内修改">
                      <template slot-scope="scope">
                        <el-switch v-if="!scope.row.is_fictitious" v-model="scope.row.is_line_update"
                          active-color="#13ce66" inactive-color="#ff4949" @change="switchFieldChange(scope.row)" />
                      </template>
                    </vxe-table-column>
                    <vxe-table-column field="update_validate" show-overflow width="120" title="行内修改权限"
                      :edit-render="{ name: 'EditDownTextarea' }" />
                    <vxe-table-column field="is_order" title="是否排序">
                      <template slot-scope="scope">
                        <el-switch v-model="scope.row.is_order" active-color="#13ce66" inactive-color="#ff4949"
                          @change="switchFieldChange(scope.row)" />
                      </template>
                    </vxe-table-column>
                    <vxe-table-column title="操作" width="80">
                      <template slot-scope="scope">
                        <el-button size="small" type="danger" icon="el-icon-delete" @click="delField(scope.row)" />
                      </template>
                    </vxe-table-column>
                  </vxe-table>
                </el-tab-pane>
                <el-tab-pane name="button">
                  <span slot="label">
                    按钮管理
                    <el-badge :value="buttons.length" class="item" />
                  </span>
                  <vxe-button status="primary" @click="addButtonInit">添加按钮</vxe-button>
                  <vxe-table ref="buttonTable" :key="Math.random()" :data="buttons" :border="true" stripe
                    show-header-overflow show-overflow size="mini" :height="son_height - 100"
                    :edit-config="{ trigger: 'dblclick', mode: 'row' }" style="width: 100%;margin-top:10px"
                    @edit-closed="editBClosedEvent">
                    <vxe-table-column field="order_num" title="排序" width="80"
                      :edit-render="{ name: '$input', props: { type: 'number' } }" />
                    <vxe-table-column field="location" title="按钮位置"
                      :edit-render="{ name: '$select', options: locationList, optionProps: { value: 'value', label: 'label' } }" />
                    <vxe-table-column field="type" title="按钮类型"
                      :edit-render="{ name: '$select', options: bTypeList, optionProps: { value: 'value', label: 'label' } }" />
                    <vxe-table-column field="icon" title="图标"
                      :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
                    <vxe-table-column field="color" title="按钮颜色"
                      :edit-render="{ name: '$select', options: colorList, optionProps: { value: 'value', label: 'label' } }" />
                    <vxe-table-column field="name" title="按钮名字"
                      :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
                    <vxe-table-column field="tip" show-overflow width="120" title="按钮提示信息"
                      :edit-render="{ name: 'EditDownTextarea' }" />
                    <vxe-table-column field="action" show-overflow width="150" title="按钮访问后端action"
                      :edit-render="{ name: 'EditDownTextarea' }" />
                    <vxe-table-column field="dialog_title" show-overflow title="dialog标题"
                      :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
                    <vxe-table-column field="dialog_width" show-overflow title="dialog宽度"
                      :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
                    <vxe-table-column field="dialog_height" show-overflow title="dialog高度"
                      :edit-render="{ name: 'input', immediate: true, attrs: { type: 'text' } }" />
                    <vxe-table-column field="dialog_src" show-overflow title="dialog地址"
                      :edit-render="{ name: 'EditDownTextarea' }" />
                    <vxe-table-column field="dialog_max" title="是否全屏">
                      <template slot-scope="scope">
                        <el-switch v-model="scope.row.dialog_max" active-color="#13ce66" inactive-color="#ff4949"
                          @change="switchButtonChange(scope.row)" />
                      </template>
                    </vxe-table-column>
                    <vxe-table-column field="dialog_maxmin" title="大小调整">
                      <template slot-scope="scope">
                        <el-switch v-model="scope.row.dialog_maxmin" active-color="#13ce66" inactive-color="#ff4949"
                          @change="switchButtonChange(scope.row)" />
                      </template>
                    </vxe-table-column>
                    <vxe-table-column field="tab_name" show-overflow title="页签名称"
                      :edit-render="{ name: 'EditDownTextarea' }" />
                    <vxe-table-column field="son_data_object_no" show-overflow title="子元数据对象"
                      :edit-render="{ name: '$select', options: objects, optionProps: { value: 'no', label: 'cn' } }" />
                    <vxe-table-column field="parent_id_field" show-overflow title="主数据关联id"
                      :edit-render="{ name: 'EditDownTextarea' }" />
                    <vxe-table-column field="son_id_field" show-overflow title="子数据关联id"
                      :edit-render="{ name: 'EditDownTextarea' }" />
                    <vxe-table-column field="auth_role" show-overflow width="140" title="角色标识权限集合"
                      :edit-render="{ name: 'EditDownTextarea' }" />
                    <vxe-table-column field="auth_row" show-overflow title="行内权限"
                      :edit-render="{ name: 'EditDownTextarea' }" />
                    <vxe-table-column field="permission_no" show-overflow title="权限编号"
                      :edit-render="{ name: 'EditDownTextarea' }" />
                    <vxe-table-column field="permission_name" show-overflow title="权限名称"
                      :edit-render="{ name: 'EditDownTextarea' }" />
                    <vxe-table-column field="is_show" title="是否显示">
                      <template slot-scope="scope">
                        <el-switch v-model="scope.row.is_show" active-color="#13ce66" inactive-color="#ff4949"
                          @change="switchButtonChange(scope.row)" />
                      </template>
                    </vxe-table-column>
                    <vxe-table-column title="操作" width="80">
                      <template slot-scope="scope">
                        <el-button size="small" type="danger" icon="el-icon-delete" @click="delButton(scope.row)" />
                      </template>
                    </vxe-table-column>
                  </vxe-table>
                </el-tab-pane>
              </el-tabs>
            </template>
          </el-row>
        </div>
      </Split>
    </div>
    <vxe-modal id="coder_objectNewDialog" v-model="objectNewDialog" title="新建模型" width="600" show-footer show-zoom
      resize remember storage transfer>
      <template #default>
        <el-form ref="form" :form="form" label-width="80px">
          <el-form-item label="编号" :label-width="formLabelWidth"><el-input v-model.lazy="form.no"
              autocomplete="off" /></el-form-item>
          <el-form-item label="对象" :label-width="formLabelWidth"><el-input v-model.lazy="form.cn"
              autocomplete="off" /></el-form-item>
          <el-form-item label="数据源" :label-width="formLabelWidth">
            <el-select v-model.lazy="form.data_source" placeholder="请选择" style="width:100%" @change="getTables">
              <el-option v-for="item in data_source" :key="item.value" :label="item.value" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="元数据表" :label-width="formLabelWidth">
            <el-select v-model.lazy="form.table_name" placeholder="请选择" filterable style="width:100%">
              <el-option v-for="item in tables" :key="item.value" :label="item.value" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="查询表达式" :label-width="formLabelWidth"><el-input v-model.lazy="form.where_attr"
              type="textarea" :rows="2" autocomplete="off" /></el-form-item>
          <el-form-item label="拦截器" :label-width="formLabelWidth"><el-input v-model.lazy="form.interceptor"
              autocomplete="off" /></el-form-item>
          <el-form-item label="表格操作列宽度" :label-width="formLabelWidth"><el-input v-model.lazy="form.handle_width"
              autocomplete="off" /></el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button size="mini" @click="objectNewDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
      </template>
    </vxe-modal>
    <vxe-modal id="coder_fieldDialog" v-model="fieldDialogFormVisible" title="新建虚拟字段" width="600" show-footer show-zoom
      resize remember storage transfer>
      <template #default>
        <el-form :model="form" size="small">
          <el-form-item label="排序" :label-width="formLabelWidth"><el-input v-model="form.order_num"
              autocomplete="off" /></el-form-item>
          <el-form-item label="字段名" :label-width="formLabelWidth"><el-input v-model="form.en"
              autocomplete="off" /></el-form-item>
          <el-form-item label="中文名" :label-width="formLabelWidth"><el-input v-model="form.cn"
              autocomplete="off" /></el-form-item>
          <el-form-item label="配置来源" :label-width="formLabelWidth"><el-input v-model="form.fictitious_sql"
              type="textarea" autocomplete="off" /></el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="fieldDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="fieldSubmit">确 定</el-button>
      </template>
    </vxe-modal>
    <vxe-modal id="coder_buttonDialog" v-model="buttonDialogFormVisible" title="添加按钮" width="600" show-footer show-zoom
      resize remember storage transfer>
      <template #default>
        <el-row :gutter="4">
          <el-form ref="buttonForm" :model="form" :rules="rules" size="small" label-width="100px">
            <el-col :span="12">
              <el-form-item label="排序" prop="order_num"><el-input v-model="form.order_num" placeholder="请输入排序" clearable
                  :style="{ width: '100%' }" /></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="按钮位置" prop="location">
                <el-select v-model="form.location" placeholder="请输入按钮位置" clearable :style="{ width: '100%' }">
                  <el-option v-for="(item, index) in locationList" :key="index" :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="按钮类型" prop="type">
                <el-select v-model="form.type" placeholder="请输入按钮类型" clearable :style="{ width: '100%' }">
                  <el-option v-for="(item, index) in bTypeList" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="图标" prop="icon"><el-input v-model="form.icon" placeholder="请输入图标" clearable
                  :style="{ width: '100%' }" /></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="按钮颜色" prop="color">
                <el-select v-model="form.color" placeholder="请输入按钮颜色" clearable :style="{ width: '100%' }">
                  <el-option v-for="(item, index) in colorList" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="名字" prop="name"><el-input v-model="form.name" placeholder="请输入名字" clearable
                  :style="{ width: '100%' }" /></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type != 3 && form.type != 4" label="按钮提示" prop="tip"
                :rules="[{ required: true, message: '请输入按钮提示', trigger: 'blur' }]">
                <el-input v-model="form.tip" placeholder="请输入按钮提示" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type != 3 && form.type != 4" label="后端方法" prop="action"
                :rules="[{ required: true, message: '请输入后端方法', trigger: 'blur' }]">
                <el-input v-model="form.action" placeholder="请输入后端方法" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 3" label="dialog标题" prop="dialog_title"
                :rules="[{ required: true, message: '请输入dialog标题', trigger: 'blur' }]">
                <el-input v-model="form.dialog_title" placeholder="请输入dialog标题" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 3" label="dialog宽度" prop="dialog_width">
                <el-input v-model="form.dialog_width" placeholder="请输入dialog宽度" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 3" label="dialog高度" prop="dialog_height">
                <el-input v-model="form.dialog_height" placeholder="请输入dialog高度" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 3" label="dialog地址" prop="dialog_src"
                :rules="[{ required: true, message: '请输入dialog地址', trigger: 'blur' }]">
                <el-input v-model="form.dialog_src" placeholder="请输入dialog地址" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 3" label="dialog全屏" prop="dialog_max">
                <el-switch v-model="form.dialog_max" active-color="#13ce66" inactive-color="#ff4949" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 3" label="dialog大小调整" prop="dialog_maxmin">
                <el-switch v-model="form.dialog_maxmin" active-color="#13ce66" inactive-color="#ff4949" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 4" label="页签名称" prop="tab_name"
                :rules="[{ required: true, message: '请输入页签名称', trigger: 'blur' }]">
                <el-input v-model="form.tab_name" placeholder="请输入页签名称" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 4" label="子数据模型" prop="son_data_object_no"
                :rules="[{ required: true, message: '请选择子数据模型', trigger: 'blur' }]">
                <el-select v-model="form.son_data_object_no" style="width: 100%;" filterable placeholder="请选择">
                  <el-option v-for="item in objects" :key="item.no" :label="item.cn" :value="item.no" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 4" label="主数据ID" prop="parent_id_field" :label-width="formLabelWidth"
                :rules="[{ required: true, message: '请填写主数据ID', trigger: 'blur' }]">
                <el-input v-model="form.parent_id_field" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.type == 4" label="子关联ID" prop="son_id_field" :label-width="formLabelWidth"
                :rules="[{ required: true, message: '请填写子关联ID', trigger: 'blur' }]">
                <el-input v-model="form.son_id_field" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权限编号" prop="permission_no">
                <el-input v-model="form.permission_no" placeholder="请输入权限编号" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权限名称" prop="permission_name">
                <el-input v-model="form.permission_name" placeholder="请输入权限名称" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="角色标识" prop="auth_role">
                <el-input v-model="form.auth_role" placeholder="请输入角色标识" clearable :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="行内权限" prop="auth_row"><el-input v-model="form.auth_row" placeholder="请输入行内权限"
                  clearable :style="{ width: '100%' }" /></el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </template>
      <template #footer>
        <el-button @click="buttonDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="buttonSubmit">确定</el-button>
      </template>
      </vxe-model>
    </vxe-modal>
  </div>
</template>

<script>
  import {
    getObjects,
    changeObject,
    newObject,
    getDataSource,
    getTables,
    getFieldsAndButtons,
    objectEdit_,
    objectCopy_,
    objectDel_,
    fieldSubmit,
    delField,
    buttonNew_,
    buttonDel_,
    fieldChange,
    buttonChange
  } from '@/api/coder/data'
  export default {
    name:'Data',
    data() {
      return {
        gridOptions: {
          border: true,
          showHeaderOverflow: true,
          showOverflow: true,
          keepSource: true,
          id: 'coder_data',
          rowId: 'id',
          rowConfig: {
            isHover: true
          },
          toolbarConfig: {
            slots: {
              buttons: 'toolbar_buttons'
            },
            refresh: true,
            print: true,
            zoom: true,
            custom: true,
            perfect: true
          },
          columns: [{
              field: 'id',
              title: 'ID',
              width: '50'
            },
            {
              field: 'no',
              title: '编号'
            },
            {
              field: 'cn',
              title: '对象',
              editRender: {
                name: 'input',
                immediate: true,
                attrs: {
                  type: 'text'
                }
              }
            },
            {
              field: 'data_source',
              title: '数据源'
            },
            {
              field: 'table_name',
              title: '元数据表'
            },
            {
              field: 'where_attr',
              title: '查询表达式',
              editRender: {
                name: 'EditDownTextarea'
              }
            },
            {
              field: 'interceptor',
              title: '拦截器',
              editRender: {
                name: 'EditDownTextarea'
              }
            },
            {
              field: 'page_size',
              title: '每页显示条数',
              editRender: {
                name: 'input',
                immediate: true,
                attrs: {
                  type: 'text'
                }
              }
            },
            {
              field: 'is_query',
              title: '是否可查询',
              slots: {
                default: 'is_query_default'
              }
            },
            {
              field: 'is_add',
              title: '是否可新增',
              slots: {
                default: 'is_add_default'
              }
            },
            {
              field: 'is_save_add',
              title: '是否保存新增',
              slots: {
                default: 'is_save_add_default'
              }
            },
            {
              field: 'is_update',
              title: '是否可修改',
              slots: {
                default: 'is_update_default'
              }
            },
            {
              field: 'is_line_update',
              title: '是否行内修改',
              slots: {
                default: 'is_line_update_default'
              }
            },
            {
              field: 'is_delete',
              title: '是否可删除',
              slots: {
                default: 'is_delete_default'
              }
            },
            {
              field: 'is_handle',
              title: '是否拥有操作列',
              slots: {
                default: 'is_handle_default'
              }
            },
            {
              field: 'handle_width',
              title: '操作列宽度',
              editRender: {
                name: 'input',
                immediate: true,
                attrs: {
                  type: 'text'
                }
              }
            },
            {
              title: '操作',
              width: 210,
              showOverflow: true,
              slots: {
                default: 'operation'
              }
            }
          ]
        },
        searchWords: '',
        objects: [],
        allObjects: [],
        data_object_no: '',
        fields: [],
        data_source: [],
        tables: [],
        buttons: [],
        form: {},
        split: 0.4,
        split_height: 0,
        parent_height: 0,
        son_height: 0,
        activeName: 'field',
        loading: false,
        typeList: [{
            value: 'input',
            label: '输入框'
          },
          {
            value: 'select',
            label: '选择框'
          },
          {
            value: 'selector',
            label: '弹窗选择器'
          },
          {
            value: 'radio',
            label: '单选按钮'
          },
          {
            value: 'switch',
            label: '开关'
          },
          {
            value: 'date',
            label: '日期'
          },
          {
            value: 'datetime',
            label: '日期时间'
          },
          {
            value: 'user',
            label: '用户选择'
          },
          {
            value: 'file',
            label: '附件'
          }
        ],
        alignList: [{
          value: 'left',
          label: '居左'
        }, {
          value: 'center',
          label: '居中'
        }, {
          value: 'right',
          label: '居右'
        }],
        locationList: [{
          value: 1,
          label: '头部'
        }, {
          value: 2,
          label: '行内'
        }],
        bTypeList: [{
          value: 1,
          label: 'confirm'
        }, {
          value: 2,
          label: 'combobox'
        }, {
          value: 3,
          label: 'dialog'
        }, {
          value: 4,
          label: 'tab'
        }],
        colorList: [{
            value: 'null',
            label: '默认按钮'
          },
          {
            value: 'primary',
            label: '主要按钮'
          },
          {
            value: 'success',
            label: '成功按钮'
          },
          {
            value: 'info',
            label: '信息按钮'
          },
          {
            value: 'warning',
            label: '警告按钮'
          },
          {
            value: 'danger',
            label: '危险按钮'
          }
        ],
        objectNewDialog: false,
        buttonDialogFormVisible: false,
        fieldDialogFormVisible: false,
        formLabelWidth: '110px',
        fullHeight: document.documentElement.clientHeight - 160,
        currentPage: 1,
        totalPage: 0,
        pageSize: 20,
        tableToolbar: {
          slots: {
            buttons: 'toolbar_buttons'
          },
          refresh: true,
          export: true,
          print: true,
          zoom: true,
          custom: true,
          perfect: true
        },
        rules: {
          order_num: [{
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }],
          location: [{
            required: true,
            message: '请输入按钮位置',
            trigger: 'change'
          }],
          type: [{
            required: true,
            message: '请输入按钮类型',
            trigger: 'change'
          }],
          icon: [],
          color: [{
            required: true,
            message: '请输入按钮颜色',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入名字',
            trigger: 'blur'
          }],
          tip: [{
            required: true,
            message: '请输入按钮提示',
            trigger: 'blur'
          }],
          permission_no: [{
            required: true,
            message: '请输入权限编号',
            trigger: 'blur'
          }],
          permission_name: [{
            required: true,
            message: '请输入权限名称',
            trigger: 'blur'
          }],
          auth_role: [],
          auth_row: []
        }
      }
    },
    watch: {
      objects: function() {
        this.$nextTick(() => {
          this.split_height = this.fullHeight - 85
          this.parent_height = this.split_height * this.split
          this.son_height = this.split_height * (1 - this.split)
        })
      },
      fullHeight: function() {
        this.split_height = this.fullHeight - 85
        this.parent_height = this.split_height * this.split
        this.son_height = this.split_height * (1 - this.split)
      },
      split: function() {
        this.split_height = this.fullHeight - 85
        this.parent_height = this.split_height * this.split
        this.son_height = this.split_height * (1 - this.split)
      }
    },
    created() {
      this.getObjects()
      this.getDataSource()
    },
    methods: {
      getObjects: function(event) {
        return new Promise((resolve, reject) => {
          getObjects()
            .then(res => {
              this.objects = res.list
              this.allObjects = res.list
              resolve(res)
            })
            .catch(error => {
              reject(error)
            })
        })
      },
      getDataSource: function(event) {
        return new Promise((resolve, reject) => {
          getDataSource()
            .then(res => {
              this.data_source = res.list
              resolve(res)
            })
            .catch(error => {
              reject(error)
            })
        })
      },
      getTables(data_source) {
        return new Promise((resolve, reject) => {
          getTables(data_source)
            .then(res => {
              this.tables = res.list
              resolve(res)
            })
            .catch(error => {
              reject(error)
            })
        })
      },
      search() {
        const filterName = this.searchWords.trim().toLowerCase()
        if (filterName !== '') {
          // const filterRE = new RegExp(filterName, 'gi')
          const searchProps = ['no', 'cn']
          const rest = this.allObjects.filter(item => searchProps.some(key => item[key].toLowerCase().indexOf(
            filterName) > -1))
          this.objects = rest
        } else {
          this.objects = this.allObjects
        }
      },
      getFieldsAndButtons({
        row
      }) {
        return new Promise((resolve, reject) => {
          getFieldsAndButtons(row.no)
            .then(res => {
              this.data_object_no = row.no
              this.fields = res.fields
              this.buttons = res.buttons
              resolve(res)
            })
            .catch(error => {
              reject(error)
            })
        })
      },
      changeObject(row) {
        return new Promise((resolve, reject) => {
          changeObject(row)
            .then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              resolve(res)
            })
            .catch(error => {
              reject(error)
            })
        })
      },
      // change
      switchFieldChange(row) {
        return new Promise((resolve, reject) => {
          fieldChange(row)
            .then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              resolve(res)
            })
            .catch(error => {
              reject(error)
            })
        })
      },
      // change
      switchButtonChange(row) {
        return new Promise((resolve, reject) => {
          buttonChange(row)
            .then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              resolve(res)
            })
            .catch(error => {
              reject(error)
            })
        })
      },
      editEvent({
        row,
        column
      }, event) {
        return new Promise((resolve, reject) => {
          changeObject(row)
            .then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              resolve(res)
            })
            .catch(error => {
              reject(error)
            })
        })
      },
      editClosedEvent({
        row,
        column
      }, event) {
        return new Promise((resolve, reject) => {
          fieldChange(row)
            .then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              resolve(res)
            })
            .catch(error => {
              reject(error)
            })
        })
      },
      addInit: function() {
        this.form = {}
        this.objectNewDialog = true
      },
      onSubmit: function() {
        return new Promise((resolve, reject) => {
          newObject(this.form)
            .then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.getObjects()
              this.objectNewDialog = false
              resolve(res)
            })
            .catch(error => {
              reject(error)
            })
        })
      },
      objectEdit_(row) {
        return new Promise((resolve, reject) => {
          objectEdit_(row)
            .then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              resolve(res)
            })
            .catch(error => {
              reject(error)
            })
        })
      },
      objectCopy_(row) {
        this.$prompt('请输入数据源编号', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          })
          .then(({
            value
          }) => {
            row.new_no = value
            return new Promise((resolve, reject) => {
              objectCopy_(row)
                .then(res => {
                  this.$message({
                    message: res.msg,
                    type: 'success'
                  })
                  this.getObjects()
                  resolve(res)
                })
                .catch(error => {
                  reject(error)
                })
            })
          })
      },
      objectDel_: function(row) {
        this.$confirm('确认是否要删除此数据模型吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            return new Promise((resolve, reject) => {
              objectDel_(row.no)
                .then(res => {
                  this.$message({
                    message: res.msg,
                    type: 'success'
                  })
                  this.getObjects()
                  resolve(res)
                })
                .catch(error => {
                  reject(error)
                })
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      delField: function(row) {
        this.$confirm('确认是否要删除此字段？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            return new Promise((resolve, reject) => {
              delField(row)
                .then(res => {
                  this.$message({
                    message: res.msg,
                    type: 'success'
                  })
                  this.$refs.fieldTable.remove(row)
                  resolve(res)
                })
                .catch(error => {
                  reject(error)
                })
            })
          })
      },
      addFieldInit: function() {
        if (this.data_object_no === '') {
          this.$message.error('请先选择元数据模型')
        } else {
          this.form = {}
          this.fieldDialogFormVisible = true
        }
      },
      fieldSubmit: function() {
        this.form.data_object_no = this.data_object_no
        return new Promise((resolve, reject) => {
          fieldSubmit(this.form)
            .then(res => {
              this.fieldDialogFormVisible = false
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.fields.push(res.row)
              resolve(res)
            })
            .catch(error => {
              reject(error)
            })
        })
      },
      addButtonInit: function() {
        if (this.data_object_no === '') {
          this.$message.error('请先选择元数据模型')
        } else {
          this.form = {
            color: ''
          }
          this.buttonDialogFormVisible = true
        }
      },
      buttonSubmit: function() {
        this.$refs['buttonForm'].validate(valid => {
          if (!valid) return
          this.form.data_object_no = this.data_object_no
          return new Promise((resolve, reject) => {
            buttonNew_(this.form)
              .then(res => {
                this.buttonDialogFormVisible = false
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
                this.buttons.push(res.row)
                resolve(res)
              })
              .catch(error => {
                reject(error)
              })
          })
        })
      },
      editBClosedEvent({
        row,
        column
      }, event) {
        return new Promise((resolve, reject) => {
          buttonChange(row)
            .then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              resolve(res)
            })
            .catch(error => {
              reject(error)
            })
        })
      },
      delButton: function(row) {
        this.$confirm('确认是否要删除此按钮？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            return new Promise((resolve, reject) => {
              buttonDel_(row)
                .then(res => {
                  this.$message({
                    message: res.msg,
                    type: 'success'
                  })
                  this.$refs.buttonTable.remove(row)
                  resolve(res)
                })
                .catch(error => {
                  reject(error)
                })
            })
          })
      },
      rowStyle({
        row,
        rowIndex
      }) {
        if (row.is_fictitious) {
          return {
            backgroundColor: '#F2DC85'
          }
        }
      }
    }
  }
</script>

<style>
</style>
